<template>
  <div>
    <!-- <son></son> -->

    <hr />

    <!-- <hello></hello> -->

    <hr />

    <!-- <button @click="hidden">出现/消失</button> -->
    <!-- 服务端懒加载? -->
    <!-- <Hello v-if="isShow"></Hello> -->

    <!-- 
      1. .server.vue后缀文件: 
        文件属于服务器端渲染, 也就是在第一次页面渲染时出现时的
      2. .client.vue后缀文件:
        在客户端渲染时出现, 所以当js解析之后, com会变为.client.vue的样式
     -->
    <com></com>

    <DevOnly>只在开发中显示</DevOnly>
  </div>
</template>

<script lang="ts" setup>
// const isShow = ref(false)
// function hidden() {
//   isShow.value = !isShow.value
// }
</script>

<style></style>
